// page页面根组件
page {
  height: 100vh; // 视口高度
  background-color: #efefef !important;
  box-sizing: border-box;
  padding: 16rpx;
  display: flex;
  flex-direction: column;
  > view {
    // 从第2个view开始每个view设置margin-top
    &:nth-child(n + 2) {
      margin-top: 16rpx;
    }
  }
}
// 轮播图区域样式
.swiper {
  border-radius: 10rpx;
  overflow: hidden;
  swiper {
    height: 350rpx;
    swiper-item {
      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
  }
}
// 公司宣传语区域样式
.info {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;
  font-size: 26rpx;
  // 调整字体图标样式
  .iconfont {
    font-size: 25rpx;
    margin-right: 10rpx;
    color: #f3514f;
  }
}
// 商品分类区域的样式
.good-nav {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;
  view {
    navigator {
      display: flex;
      flex-direction: column;
      align-items: center;
      image {
        width: 80rpx;
        height: 80rpx;
      }
      text {
        font-size: 20rpx;
        margin-top: 12rpx;
      }
    }
  }
}
// 推荐商品区域样式
.good-hot {
  background-color: #fff;
  padding: 16rpx;
  border-radius: 10rpx;
  .scroll-x {
    width: 100%;
    white-space: nowrap; // 不允许换行
    view {
      display: inline-block; // 变为行内块元素
      width: 320rpx;
      height: 420rpx;
      margin-right: 16rpx;
      &:last-child {
        margin-right: 0;
      }
      .good-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        image {
          width: 100%;
          height: 320rpx;
          border-radius: 16rpx;
        }
        text {
          font-size: 25rpx;
          &:nth-of-type(1) {
            font-weight: bold;
          }
          &:nth-of-type(2) {
            color: rgb(228, 15, 15);
          }
        }
      }
    }
  }
}

// 测试
/* .bg-image {
  height: 400rpx;
  // 小程序背景图的地址不能写本地路径
  // background-image: url(../../assets/bgimage.png);
  // 使用网络图片替换本地路径
  // background-image: url(http://8.131.91.46:6677/TomAndJerry.jpg);
  // 使用base64(不建议太长)
} */
/* .scroll-x {
  width: 100%;
  white-space: nowrap; // 不允许换行，让宽度超出藏在页面后
  background-color: skyblue;
  view {
    display: inline-block; // 将view变为行内块可以排列在一行
    width: 300rpx;
    height: 80rpx;
    &:last-child { // 用于区分
      background-color: hotpink;
    }
    &:first-child {
      background-color: aqua;
    }
  }
}
.scroll-y {
  height: 300rpx; // 设置固定高度
  background-color: skyblue;
  margin-top: 10rpx;
  view {
    width: 100%;
    height: 200rpx;
    &:last-child {
      background-color: hotpink;
    }
    &:first-child {
      background-color: aqua;
    }
  }
} */
